<template>
    <ul class="ranking-view">
        <li v-for="(listItem,index) in indexData">
        	<i></i>
        	<h4>NO.{{index+1}}</h4>
        	<a @mouseover="pMouseIn($event)" @mouseleave="pMouseOut($event)">{{listItem.context}}</a>
        	<h5>{{listItem.state}} 件</h5>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'RankingOne',
        components: {
        },
        props:['indexData'],
        data () {
            return {
            	bHtml: "",
            	rSwitch: true
            }
        },
        mounted(){
        },
        methods: {
            pMouseIn($event){
            	var clientWidth = $event.currentTarget.clientWidth;
				var scrollWidth = $event.currentTarget.scrollWidth;
				if(clientWidth<scrollWidth && this.rSwitch){
//					alert("已省略……");
            		this.bHtml = $event.currentTarget.innerHTML;
					var newdiv = document.createElement('div');
					newdiv.setAttribute("class","extend");
					newdiv.innerHTML = $event.currentTarget.innerHTML;
		            $event.currentTarget.appendChild(newdiv);
		            this.rSwitch = false;
				}
            },
            pMouseOut($event){
            	var clientWidth = $event.currentTarget.clientWidth;
				var scrollWidth = $event.currentTarget.scrollWidth;
				if(clientWidth<scrollWidth){
					$event.currentTarget.innerHTML = this.bHtml;
					this.rSwitch = true;
				}
            }
        }
    }

</script>
<style lang="less">
    .ranking-view{
    	position: relative;
        width: 838px;
        padding: 5px 0;
        li{
        	position: relative;
        	background: rgba(36,205,211,.1);
        	height: 72px;
        	margin: 22px 15px;
        	&:before,&:after{
        		display: block;
        		content: "";
        		position: absolute;
        		top: -1px;
        		width: 15px;
        		height: 74px;
        		background: url('./img/ranking-bg.png') no-repeat center;
        	}
        	&:before{
        		left: -15px;
        	}
        	&:after{
        		right: -15px;
        		transform: rotate(180deg);
        	}
        	i{
        		float: left;
        		width: 36px;
        		height: 72px;
        		background: url('./img/yuan4.png') no-repeat center;
        		margin-left: 30px;
        	}
        	&:nth-child(1){
        		i{
        			background-image: url('./img/yuan1.png');
        		}
        		h4{
        			color: #f60;
        		}
        	}
        	&:nth-child(2){
        		i{
        			background-image: url('./img/yuan2.png');
        		}
        		h4{
        			color: #f60;
        		}
        	}
        	&:nth-child(3){
        		i{
        			background-image: url('./img/yuan3.png');
        		}
        		h4{
        			color: #f60;
        		}
        	}
        	h4{
        		float: left;
        		width: 100px;
        		height: 72px;
        		font-size: 32px;
        		color: #2bb3e2;
        		line-height: 72px;
        		margin-left: 30px;
        		transform: translate3d(0,0,0);
        	}
        	a{
        		float: left;
        		width: 360px;
        		height: 72px;
        		font-size: 36px;
        		color: #fff;
        		line-height: 72px;
        		margin-left: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
        	}
        	h5{
        		float: left;
        		width: 190px;
        		height: 72px;
        		font-size: 36px;
        		font-weight: normal;
        		color: #0ef1ff;
        		line-height: 72px;
        		margin-left: 30px;
				transform: translate3d(0,0,0);
        	}
            .extend{
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                width: 700px;
                white-space: normal;
                background: rgba(1,7,12,.8);
                line-height: 70px;
                border: #00c8e0 1px solid;
                padding: 0 20px;
                box-shadow: 0 0 20px #0e93f4;
            }
        }
        &.lozenge{
        	li{
        		i{
        			background-image: url('./img/duobian4.png');
        		}
	        	&:nth-child(1){
	        		i{
	        			background-image: url('./img/duobian1.png');
	        		}
	        	}
	        	&:nth-child(2){
	        		i{
	        			background-image: url('./img/duobian2.png');
	        		}
	        	}
	        	&:nth-child(3){
	        		i{
	        			background-image: url('./img/duobian3.png');
	        		}
	        	}
        	}
        }
        &.diamond{
        	li{
        		i{
        			background-image: url('./img/zuan4.png');
        		}
	        	&:nth-child(1){
	        		i{
	        			background-image: url('./img/zuan1.png');
	        		}
	        	}
	        	&:nth-child(2){
	        		i{
	        			background-image: url('./img/zuan2.png');
	        		}
	        	}
	        	&:nth-child(3){
	        		i{
	        			background-image: url('./img/zuan3.png');
	        		}
	        	}
        	}
        }
    }
</style>
